<template>
  <ul class="history">
    <li @click.stop="showSingleChat('123')" class="history-item">
      <div class="avatar">
        <img src="/static/images/library.jpg" alt="头像">
        <span class="notify-badge">1</span>
      </div>
      <div class="historyinfo">
        <span class="last-time">19/03/06</span>
        <span class="nickname">用户名</span>
        <span class="summary">聊天记录</span>
      </div>
      <div class="clearfix"></div>
    </li>
    <li @click.prevent="showGroupChat(123)" class="history-item">
      <div class="avatar">
        <img src="/static/images/library.jpg" alt="头像">
      </div>
      <div class="historyinfo">
        <span class="last-time">19/03/06</span>
        <span class="groupname">组名</span>
        <span class="summary">聊天记录</span>
      </div>
      <div class="clearfix"></div>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'history',
  data () {
    return {

    }
  },
  components: {
  },
  methods: {
    showSingleChat: function (userid) {
      this.$store.commit('setCurrentChattingId', userid)
      this.$store.commit('setRightPanelType', 'singlechat')
    },
    showGroupChat: function (groupid) {
      this.$store.commit('setRightPanelType', 'groupchat')
    }
  },
  created: function () {
    this.$store.commit('setLeftPanelType', 'history')
  }
}
</script>

<style lang="scss">
.history{
  background: whitesmoke;
  height: 100%;
  overflow-y: scroll;
  .history-item{
    height: 60px;
    color: black;
    background: white;
    border-bottom: 1px solid whitesmoke;
    overflow: hidden;   /*解除外边距合并*/
    &:hover{
      cursor: pointer;
    }
  }
  .selected{
    background: #eee;
  }
  .avatar{
    float: left;
    margin: 5px;
    width: 50px;
    img{
      width: 50px;
      height: 50px;
      border-radius: 5px;
    }
  }
  .historyinfo{
    box-sizing: border-box;
    margin: 5px;
    .nickname, .groupname{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
      font-weight: bold;
    }
    .groupname{
      color: blue;
    }
    .last-time{
      float: right;
      font-size: 60%;
      color: lightgray;
    }
    .summary{
      color: lightgray;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 8px;
    }
  }
}
</style>
